<template>
	<div>
		<el-input v-model="searchform.telephone" placeholder="请输入电话号码" style="width: 300px;"></el-input>  
		<el-input v-model="searchform.username" placeholder="请输入名字" style="width: 200px;"></el-input>  
		<el-button type="success"   @click="resetSearchFrom">重置</el-button>
		<el-button icon="el-icon-search" circle @click="queryData"></el-button>
		
		<el-button @click="addDept">添加</el-button>
		<!-- dialogVisible 弹出框名字 -->
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :before-close="handleClose">
		  <span>
			<el-form ref="form" :model="form" label-width="80px">
			    <el-form-item label="部门名称">
			      <el-input v-model="form.username"></el-input>
			    </el-form-item>
				<el-form-item label="状态">
				  <el-input v-model="form.status"></el-input>
				</el-form-item>
				<el-form-item label="电话号码">
				  <el-input v-model="form.telephone"></el-input>
				</el-form-item>
				<el-form-item label="密码">
				  <el-input v-model="form.password"></el-input>
				</el-form-item>
			    <!-- <el-form-item label="地址">
			       <el-select v-model="form.loc" placeholder="请选择活动地址">
			        <el-option label="北京" value="北京"></el-option>
			        <el-option label="上海" value="上海"></el-option>
			       </el-select>
			    </el-form-item> -->
				
				<el-form-item>
				    <el-button type="primary" @click="onSubmit">立即创建</el-button>
				    <el-button>取消</el-button>
				</el-form-item>
			</el-form>
		  </span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
		
		
		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column prop="id" label="编号" width="180">
			</el-table-column>
			<el-table-column prop="username" label="名字" width="180">
			</el-table-column>
			<el-table-column prop="password" label="密码">
			</el-table-column>
			<el-table-column prop="telephone" label="电话">
			</el-table-column>
			<el-table-column prop="status" label="状态">
				
				<template slot-scope="scope">
					<el-tooltip  placement="top">
						<!-- @change禁止 -->
					  <el-switch
					  disabled
					    v-model="scope.row.status"
					    active-color="#13ce66"
					    inactive-color="#ff4949"
					    active-value="1"
					    inactive-value="2">
					  </el-switch>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column
			      label="操作">
			      <template slot-scope="scope">
					  <el-button type="text" size="small" @click="upduser(scope.row)">修改</el-button>
					  <!-- scope.row.id  代表当前列的值 -->
			        <el-button @click="delUser(scope.row.id)" type="text" size="small">删除</el-button>
			      </template>
			    </el-table-column>
		</el-table>
		
		
		
		
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="page.current"
		  :page-sizes="[1, 2, 4, 8]"
		  :page-size="page.size"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="page.total">
		</el-pagination>
	
	</div>
</template>
<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>

<script>
	// 引入qs
	import qs from 'qs';
	export default {
		
		methods: {
			  handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				// 查询数据库进行更改
				this.page.size = val
				this.queryData();
			  },
			  handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page.current=val;
				this.queryData();
			  },
			resetSearchFrom(){
				this.searchform={};
				this.queryData()
			},
			upduser(obj){
				// 弹出框显示
				this.dialogVisible=true
				// 2 将选中的按钮的一行数据 填充到弹出框里面
				//this.form = obj;  //浅拷贝
				// 深拷贝
				this.form = JSON.parse(JSON.stringify(obj));
				
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex % 2 === 3) {
					return 'success-row';
				}
				return '';
			},
			queryData() {
				//alert(JSON.stringify(this.searchform));
				// 后台发出请求
				
				// 刚开始的时候searcfrom是{}   还有关于的值的值
				// 1.合并对象
				// const newobj = {...this.searchform,...this.page};
				// 2.合并对象
				const newobj = Object.assign(this.searchform,this.page);
				this.$axios.get("t-user",{
					params:newobj
					}).then(r => {
					// 将后端返回的数据给tableData
					this.tableData = r.data.t.records;
					// alert(JSON.stringify(this.tableData))
					this.page.total = r.data.t.total;
				})
			},
			handleClose(done) {
					this.$confirm('确认关闭？')
					  .then(_ => {
						done();
					  })
					  .catch(_ => {});
				  },
			// 点击添加显示弹窗
			addDept(){
				this.dialogVisible = true;
				// 清空 form
				this.form ={};
			},
			onSubmit(){
				// 发出请求将输入框数据输出去
				// 用qs发出记得引入
				this.$axios.post("t-user",qs.stringify(this.form)).then(r=>{
					  this.$message({
					          message: r.data.msg,
					          type: 'success'
					        });
					this.dialogVisible = false;
					this.queryData();
				})
			},
			delUser(id){
				//alert(id);
				// 根据id删除数据
				// this.$axios.delete("t-user/"+id).then(r=>{
				// 	// 
				// 	alert(r.data.msg);
				// 	this.queryData();
				// })
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							// 根据id删除数据
							this.$axios.delete("t-user/"+id).then(r=>{
								this.$message({
									// 可以关闭
									showClose: true,
								  type: 'success',
								  // message: '删除成功!'
								  message: r.data.msg
								});
								this.queryData();
							})
				        
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
			}
		
		},
		data() {
			return {
				tableData: [],
				dialogVisible: false,
				// 弹窗用
				form:{},
				// 默认为空
				searchform:{username:"",telephone:""},
			
				page:{
					// 默认显示第四页
					current:1,
					// 总条数
					total:400,
					//默认是10条
					size:10
				}
				
				
				  
			}
		},
		created() {
			// 返回这个文件没有人调用这个数据，所以设置一个调用
			this.queryData();
		},
		
	}
</script>
